<template>
  <div class="page-container">
    <el-header>
      <div style="width:90%;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px">
        <!--工具栏-->
        <div style="padding-top:10px;padding-left:15px;">
          <el-form :inline="true" :model="filters" :size="size" ref="filters">
            <el-form-item label="时间范围">
              <el-date-picker
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="code">
              <el-button-group>
                <el-button @click="click1()">昨天</el-button>
                <el-button @click="click2()">近7天</el-button>
                <el-button @click="click3()">近30天</el-button>
              </el-button-group>
            </el-form-item>

            <el-row>
              <el-form-item prop="channel" label="渠道" style="margin-left:30px">
                <el-select v-model="filters.channel" placeholder="渠道" style="width:215px">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="BBC" value="1"></el-option>
                  <el-option label="天猫" value="2"></el-option>
                  <el-option label="京东" value="3"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="merchant" label="商家">
                <el-select v-model="filters.merchant" placeholder="商家" style="width:215px">
                  <el-option label="录屏商家02" value="1"></el-option>
                  <el-option label="录屏商家01" value="1"></el-option>
                  <el-option label="测试商家" value="2"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="store" label="店铺">
                <el-select v-model="filters.store" placeholder="店铺" style="width:215px">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="京东店" value="1"></el-option>
                  <el-option label="育学园天猫旗舰店" value="2"></el-option>
                  <el-option label="录屏店铺" value="3"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="terminal" label="终端">
                <el-select v-model="filters.terminal" placeholder="终端" style="width:215px">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="PC" value="1"></el-option>
                  <el-option label="IOS" value="2"></el-option>
                  <el-option label="Android" value="3"></el-option>
                  <el-option label="H5" value="4"></el-option>
                  <el-option label="小程序" value="5"></el-option>
                </el-select>
              </el-form-item>
            </el-row>

            <el-row>
              <el-form-item>
                <kt-button
                  icon="fa fa-search"
                  :label="$t('action.search')"
                  type="primary"
                  @click="find()"
                />
              </el-form-item>
            </el-row>
          </el-form>

          <!--表格内容栏-->
          <cy-table
            :height="350"
            :data="pageResult"
            :columns="filterColumns"
            :showOperation="false"
            @findPage="findPage"
            @selectionChange="selectionChange"
            ref="CyTable"
          ></cy-table>
        </div>
      </div>
    </el-header>

    <el-main>

      <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px">
        <div  style="float:left;padding-top:800px;padding-left:15px;">
          <el-form :inline="true" :model="filters" :size="size" ref="filters">
            <el-form-item label="渠道">
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              <el-checkbox-group v-model="checkedChannel" @change="handleCheckedChannelChange">
                <el-checkbox v-for="cns in channels" :label="cns" :key="cns">{{cns}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="统计指标">
              <el-select v-model="option_indicator" @change="option_indicator_change" placeholder="请选择统计指标">
                <el-option
                  v-for="item in options_indicator"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>

        <div  id="channelTerminalBarChart"
             style="float:left;padding-top:10px;padding-left:15px;width:700px;height:600px"></div>
      </div>


    </el-main>
  </div>

</template>

<script>
  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";

  const channelOptions = ['BBC', '天猫', '京东'];
  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        checkAll: false,
        checkedChannel: [],
        channels: channelOptions,
        option_indicator:"",
        options_indicator :[
          {
          value: 'pv',
          label: 'PV'
        }, {
          value: 'uv',
          label: 'UV'
        }, {
          value: 'payOrderNum',
          label: '成交订单数'
        }, {
          value: 'payOrderAmount',
          label: '成交订单金额'
        }, {
          value: 'orderUvRate',
          label: '成交转化率'
        }, {
          value: 'newUserCount',
          label: '新客数'
        }, {
          value: 'oldUserCount',
          label: '老客数'
        }, {
          value: 'orderUnitAmount',
          label: '客单价'
        }],
        isIndeterminate: true,

        totalSize: 0,
        content: [],
        // 分页信息
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        filterColumns: [],
        pageResult: {},
        size: "small",
        filters: {
          channel:"",
          merchant:"",
          store:"",
          terminal:"",
          res:{
            "total": 1,
            "code": "0000",
            "rows": [
              {
              "companyId": 276,
              "merchantId": null,
              "merchantName": null,
              "storeId": null,
              "storeName": null,
              "channelCode": "-1",
              "channelName": "合计",
              "dataDt": null,
              "dataStr": null,
              "orgFlag": null,
              "terminalSource": -1,
              "firstCategoryId": null,
              "firstCategoryName": null,
              "hasChild": false,
              "merchantFlag": null,
              "terminalName": "全部",
              "pv": 4600,
              "uv": 76,
              "payOrderNum": 7,
              "newUserCount": 1,
              "oldUserCount": 7,
              "payOrderAmount": 13.03,
              "orderUvRate": 10.53,
              "orderUnitAmount": 1.86,
              "pvLinkrelativeRate": 41.54,
              "uvLinkrelativeRate": -45.71,
              "payOrderNumLinkrelativeRate": 75.00,
              "payOrderAmountLinkrelativeRate": 2001.61,
              "orderUvRateLinkrelativeRate": 84.41,
              "newUserNumLinkrelativeRate": null,
              "oldUserNumLinkrelativeRate": null,
              "orderUnitAmountLinkrelativeRate": 1062.50,
              "pvYearbasisRate": null,
              "uvYearbasisRate": null,
              "payOrderNumYearbasisRate": null,
              "payOrderAmountYearbasisRate": null,
              "orderUvRateYearbasisRate": null,
              "newUserNumYearbasisRate": null,
              "oldUserNumYearbasisRate": null,
              "orderUnitAmountYearbasisRate": null
            },
              {
                "companyId": 276,
                "merchantId": null,
                "merchantName": null,
                "storeId": null,
                "storeName": null,
                "channelCode": "-1",
                "channelName": null,
                "dataDt": null,
                "dataStr": null,
                "orgFlag": null,
                "terminalSource": -1,
                "firstCategoryId": null,
                "firstCategoryName": null,
                "hasChild": false,
                "merchantFlag": null,
                "terminalName": "",
                "pv": 2300,
                "uv": 38,
                "payOrderNum": 0,
                "newUserCount": 0,
                "oldUserCount": 0,
                "payOrderAmount": 0,
                "orderUvRate": 10.53,
                "orderUnitAmount": 0,
                "pvLinkrelativeRate": 41.54,
                "uvLinkrelativeRate": -45.71,
                "payOrderNumLinkrelativeRate": null,
                "payOrderAmountLinkrelativeRate": null,
                "orderUvRateLinkrelativeRate": 84.41,
                "newUserNumLinkrelativeRate": null,
                "oldUserNumLinkrelativeRate": null,
                "orderUnitAmountLinkrelativeRate": null,
                "pvYearbasisRate": null,
                "uvYearbasisRate": null,
                "payOrderNumYearbasisRate": null,
                "payOrderAmountYearbasisRate": null,
                "orderUvRateYearbasisRate": null,
                "newUserNumYearbasisRate": null,
                "oldUserNumYearbasisRate": null,
                "orderUnitAmountYearbasisRate": null
              },
              {
                "companyId": 276,
                "merchantId": null,
                "merchantName": null,
                "storeId": null,
                "storeName": null,
                "channelCode": "110001",
                "channelName": "BBC",
                "dataDt": null,
                "dataStr": null,
                "orgFlag": null,
                "terminalSource": -1,
                "firstCategoryId": null,
                "firstCategoryName": null,
                "hasChild": false,
                "merchantFlag": null,
                "terminalName": "",
                "pv": 2300,
                "uv": 38,
                "payOrderNum": 7,
                "newUserCount": 1,
                "oldUserCount": 3,
                "payOrderAmount": 13.03,
                "orderUvRate": 10.53,
                "orderUnitAmount": 1.86,
                "pvLinkrelativeRate": 41.54,
                "uvLinkrelativeRate": -45.71,
                "payOrderNumLinkrelativeRate": 75.00,
                "payOrderAmountLinkrelativeRate": 2001.61,
                "orderUvRateLinkrelativeRate": 84.41,
                "newUserNumLinkrelativeRate": null,
                "oldUserNumLinkrelativeRate": null,
                "orderUnitAmountLinkrelativeRate": 1062.50,
                "pvYearbasisRate": null,
                "uvYearbasisRate": null,
                "payOrderNumYearbasisRate": null,
                "payOrderAmountYearbasisRate": null,
                "orderUvRateYearbasisRate": null,
                "newUserNumYearbasisRate": null,
                "oldUserNumYearbasisRate": null,
                "orderUnitAmountYearbasisRate": null
              },
              {
                "companyId": 276,
                "merchantId": null,
                "merchantName": null,
                "storeId": null,
                "storeName": null,
                "channelCode": "-1",
                "channelName": "总计",
                "dataDt": null,
                "dataStr": null,
                "orgFlag": null,
                "terminalSource": 2,
                "firstCategoryId": null,
                "firstCategoryName": null,
                "hasChild": false,
                "merchantFlag": null,
                "terminalName": "H5",
                "pv": 3670,
                "uv": 56,
                "payOrderNum": 6,
                "newUserCount": 1,
                "oldUserCount": 5,
                "payOrderAmount": 13.02,
                "orderUvRate": 10.71,
                "orderUnitAmount": 2.17,
                "pvLinkrelativeRate": 6696.30,
                "uvLinkrelativeRate": 2700.00,
                "payOrderNumLinkrelativeRate": 50.00,
                "payOrderAmountLinkrelativeRate": 2000.00,
                "orderUvRateLinkrelativeRate": 55.22,
                "newUserNumLinkrelativeRate": null,
                "oldUserNumLinkrelativeRate": null,
                "orderUnitAmountLinkrelativeRate": 1256.25,
                "pvYearbasisRate": null,
                "uvYearbasisRate": null,
                "payOrderNumYearbasisRate": null,
                "payOrderAmountYearbasisRate": null,
                "orderUvRateYearbasisRate": null,
                "newUserNumYearbasisRate": null,
                "oldUserNumYearbasisRate": null,
                "orderUnitAmountYearbasisRate": null
              },
              {
                "companyId": 276,
                "merchantId": null,
                "merchantName": null,
                "storeId": null,
                "storeName": null,
                "channelCode": "-1",
                "channelName": null,
                "dataDt": null,
                "dataStr": null,
                "orgFlag": null,
                "terminalSource": 2,
                "firstCategoryId": null,
                "firstCategoryName": null,
                "hasChild": false,
                "merchantFlag": null,
                "terminalName": "",
                "pv": 1835,
                "uv": 28,
                "payOrderNum": 0,
                "newUserCount": 0,
                "oldUserCount": 0,
                "payOrderAmount": 0,
                "orderUvRate": 10.71,
                "orderUnitAmount": 0,
                "pvLinkrelativeRate": 47.39,
                "uvLinkrelativeRate": -51.72,
                "payOrderNumLinkrelativeRate": null,
                "payOrderAmountLinkrelativeRate": null,
                "orderUvRateLinkrelativeRate": 55.22,
                "newUserNumLinkrelativeRate": null,
                "oldUserNumLinkrelativeRate": null,
                "orderUnitAmountLinkrelativeRate": null,
                "pvYearbasisRate": null,
                "uvYearbasisRate": null,
                "payOrderNumYearbasisRate": null,
                "payOrderAmountYearbasisRate": null,
                "orderUvRateYearbasisRate": null,
                "newUserNumYearbasisRate": null,
                "oldUserNumYearbasisRate": null,
                "orderUnitAmountYearbasisRate": null
              },
              {
                "companyId": 276,
                "merchantId": null,
                "merchantName": null,
                "storeId": null,
                "storeName": null,
                "channelCode": "110001",
                "channelName": "BBC",
                "dataDt": null,
                "dataStr": null,
                "orgFlag": null,
                "terminalSource": 2,
                "firstCategoryId": null,
                "firstCategoryName": null,
                "hasChild": false,
                "merchantFlag": null,
                "terminalName": "",
                "pv": 1835,
                "uv": 28,
                "payOrderNum": 6,
                "newUserCount": 1,
                "oldUserCount": 2,
                "payOrderAmount": 13.02,
                "orderUvRate": 10.71,
                "orderUnitAmount": 2.17,
                "pvLinkrelativeRate": 47.39,
                "uvLinkrelativeRate": -51.72,
                "payOrderNumLinkrelativeRate": 50.00,
                "payOrderAmountLinkrelativeRate": 2000.00,
                "orderUvRateLinkrelativeRate": 55.22,
                "newUserNumLinkrelativeRate": null,
                "oldUserNumLinkrelativeRate": null,
                "orderUnitAmountLinkrelativeRate": 1256.25,
                "pvYearbasisRate": null,
                "uvYearbasisRate": null,
                "payOrderNumYearbasisRate": null,
                "payOrderAmountYearbasisRate": null,
                "orderUvRateYearbasisRate": null,
                "newUserNumYearbasisRate": null,
                "oldUserNumYearbasisRate": null,
                "orderUnitAmountYearbasisRate": null
              },
              {
                "companyId": 276,
                "merchantId": null,
                "merchantName": null,
                "storeId": null,
                "storeName": null,
                "channelCode": "-1",
                "channelName": "总计",
                "dataDt": null,
                "dataStr": null,
                "orgFlag": null,
                "terminalSource": 3,
                "firstCategoryId": null,
                "firstCategoryName": null,
                "hasChild": false,
                "merchantFlag": null,
                "terminalName": "Android",
                "pv": 620,
                "uv": 8,
                "payOrderNum": 0,
                "newUserCount": 0,
                "oldUserCount": 0,
                "payOrderAmount": 0,
                "orderUvRate": 0,
                "orderUnitAmount": 0,
                "pvLinkrelativeRate": 1048.15,
                "uvLinkrelativeRate": 300.00,
                "payOrderNumLinkrelativeRate": -100.00,
                "payOrderAmountLinkrelativeRate": -100.00,
                "orderUvRateLinkrelativeRate": -100.00,
                "newUserNumLinkrelativeRate": null,
                "oldUserNumLinkrelativeRate": null,
                "orderUnitAmountLinkrelativeRate": -100.00,
                "pvYearbasisRate": null,
                "uvYearbasisRate": null,
                "payOrderNumYearbasisRate": null,
                "payOrderAmountYearbasisRate": null,
                "orderUvRateYearbasisRate": null,
                "newUserNumYearbasisRate": null,
                "oldUserNumYearbasisRate": null,
                "orderUnitAmountYearbasisRate": null
              },
              {
                "companyId": 276,
                "merchantId": null,
                "merchantName": null,
                "storeId": null,
                "storeName": null,
                "channelCode": "-1",
                "channelName": null,
                "dataDt": null,
                "dataStr": null,
                "orgFlag": null,
                "terminalSource": 3,
                "firstCategoryId": null,
                "firstCategoryName": null,
                "hasChild": false,
                "merchantFlag": null,
                "terminalName": "",
                "pv": 310,
                "uv": 4,
                "payOrderNum": 0,
                "newUserCount": 0,
                "oldUserCount": 0,
                "payOrderAmount": 0,
                "orderUvRate": 0,
                "orderUnitAmount": 0,
                "pvLinkrelativeRate": 210.00,
                "uvLinkrelativeRate": -33.33,
                "payOrderNumLinkrelativeRate": null,
                "payOrderAmountLinkrelativeRate": null,
                "orderUvRateLinkrelativeRate": null,
                "newUserNumLinkrelativeRate": null,
                "oldUserNumLinkrelativeRate": null,
                "orderUnitAmountLinkrelativeRate": null,
                "pvYearbasisRate": null,
                "uvYearbasisRate": null,
                "payOrderNumYearbasisRate": null,
                "payOrderAmountYearbasisRate": null,
                "orderUvRateYearbasisRate": null,
                "newUserNumYearbasisRate": null,
                "oldUserNumYearbasisRate": null,
                "orderUnitAmountYearbasisRate": null
              },
              {
                "companyId": 276,
                "merchantId": null,
                "merchantName": null,
                "storeId": null,
                "storeName": null,
                "channelCode": "110001",
                "channelName": "BBC",
                "dataDt": null,
                "dataStr": null,
                "orgFlag": null,
                "terminalSource": 3,
                "firstCategoryId": null,
                "firstCategoryName": null,
                "hasChild": false,
                "merchantFlag": null,
                "terminalName": "",
                "pv": 310,
                "uv": 4,
                "payOrderNum": 0,
                "newUserCount": 0,
                "oldUserCount": 0,
                "payOrderAmount": 0,
                "orderUvRate": 0,
                "orderUnitAmount": 0,
                "pvLinkrelativeRate": 210.00,
                "uvLinkrelativeRate": -33.33,
                "payOrderNumLinkrelativeRate": null,
                "payOrderAmountLinkrelativeRate": null,
                "orderUvRateLinkrelativeRate": null,
                "newUserNumLinkrelativeRate": null,
                "oldUserNumLinkrelativeRate": null,
                "orderUnitAmountLinkrelativeRate": null,
                "pvYearbasisRate": null,
                "uvYearbasisRate": null,
                "payOrderNumYearbasisRate": null,
                "payOrderAmountYearbasisRate": null,
                "orderUvRateYearbasisRate": null,
                "newUserNumYearbasisRate": null,
                "oldUserNumYearbasisRate": null,
                "orderUnitAmountYearbasisRate": null
              },
              {
                "companyId": 276,
                "merchantId": null,
                "merchantName": null,
                "storeId": null,
                "storeName": null,
                "channelCode": "-1",
                "channelName": "总计",
                "dataDt": null,
                "dataStr": null,
                "orgFlag": null,
                "terminalSource": 4,
                "firstCategoryId": null,
                "firstCategoryName": null,
                "hasChild": false,
                "merchantFlag": null,
                "terminalName": "IOS",
                "pv": 310,
                "uv": 20,
                "payOrderNum": 0,
                "newUserCount": 0,
                "oldUserCount": 0,
                "payOrderAmount": 0,
                "orderUvRate": 0,
                "orderUnitAmount": 0,
                "pvLinkrelativeRate": -38.74,
                "uvLinkrelativeRate": 25.00,
                "payOrderNumLinkrelativeRate": null,
                "payOrderAmountLinkrelativeRate": null,
                "orderUvRateLinkrelativeRate": null,
                "newUserNumLinkrelativeRate": null,
                "oldUserNumLinkrelativeRate": null,
                "orderUnitAmountLinkrelativeRate": null,
                "pvYearbasisRate": null,
                "uvYearbasisRate": null,
                "payOrderNumYearbasisRate": null,
                "payOrderAmountYearbasisRate": null,
                "orderUvRateYearbasisRate": null,
                "newUserNumYearbasisRate": null,
                "oldUserNumYearbasisRate": null,
                "orderUnitAmountYearbasisRate": null
              },
              {
                "companyId": 276,
                "merchantId": null,
                "merchantName": null,
                "storeId": null,
                "storeName": null,
                "channelCode": "-1",
                "channelName": null,
                "dataDt": null,
                "dataStr": null,
                "orgFlag": null,
                "terminalSource": 4,
                "firstCategoryId": null,
                "firstCategoryName": null,
                "hasChild": false,
                "merchantFlag": null,
                "terminalName": "",
                "pv": 155,
                "uv": 10,
                "payOrderNum": 0,
                "newUserCount": 0,
                "oldUserCount": 0,
                "payOrderAmount": 0,
                "orderUvRate": 0,
                "orderUnitAmount": 0,
                "pvLinkrelativeRate": -38.74,
                "uvLinkrelativeRate": 25.00,
                "payOrderNumLinkrelativeRate": null,
                "payOrderAmountLinkrelativeRate": null,
                "orderUvRateLinkrelativeRate": null,
                "newUserNumLinkrelativeRate": null,
                "oldUserNumLinkrelativeRate": null,
                "orderUnitAmountLinkrelativeRate": null,
                "pvYearbasisRate": null,
                "uvYearbasisRate": null,
                "payOrderNumYearbasisRate": null,
                "payOrderAmountYearbasisRate": null,
                "orderUvRateYearbasisRate": null,
                "newUserNumYearbasisRate": null,
                "oldUserNumYearbasisRate": null,
                "orderUnitAmountYearbasisRate": null
              },
              {
                "companyId": 276,
                "merchantId": null,
                "merchantName": null,
                "storeId": null,
                "storeName": null,
                "channelCode": "110001",
                "channelName": "BBC",
                "dataDt": null,
                "dataStr": null,
                "orgFlag": null,
                "terminalSource": 4,
                "firstCategoryId": null,
                "firstCategoryName": null,
                "hasChild": false,
                "merchantFlag": null,
                "terminalName": "",
                "pv": 155,
                "uv": 10,
                "payOrderNum": 0,
                "newUserCount": 0,
                "oldUserCount": 0,
                "payOrderAmount": 0,
                "orderUvRate": 0,
                "orderUnitAmount": 0,
                "pvLinkrelativeRate": -38.74,
                "uvLinkrelativeRate": 25.00,
                "payOrderNumLinkrelativeRate": null,
                "payOrderAmountLinkrelativeRate": null,
                "orderUvRateLinkrelativeRate": null,
                "newUserNumLinkrelativeRate": null,
                "oldUserNumLinkrelativeRate": null,
                "orderUnitAmountLinkrelativeRate": null,
                "pvYearbasisRate": null,
                "uvYearbasisRate": null,
                "payOrderNumYearbasisRate": null,
                "payOrderAmountYearbasisRate": null,
                "orderUvRateYearbasisRate": null,
                "newUserNumYearbasisRate": null,
                "oldUserNumYearbasisRate": null,
                "orderUnitAmountYearbasisRate": null
              },
              {
                "companyId": 276,
                "merchantId": null,
                "merchantName": null,
                "storeId": null,
                "storeName": null,
                "channelCode": "-1",
                "channelName": "总计",
                "dataDt": null,
                "dataStr": null,
                "orgFlag": null,
                "terminalSource": 99,
                "firstCategoryId": null,
                "firstCategoryName": null,
                "hasChild": false,
                "merchantFlag": null,
                "terminalName": "Other",
                "pv": 0,
                "uv": 0,
                "payOrderNum": 1,
                "newUserCount": 0,
                "oldUserCount": 0,
                "payOrderAmount": 0.01,
                "orderUvRate": 0,
                "orderUnitAmount": 0.01,
                "pvLinkrelativeRate": -100.00,
                "uvLinkrelativeRate": -100.00,
                "payOrderNumLinkrelativeRate": -75.00,
                "payOrderAmountLinkrelativeRate": -98.39,
                "orderUvRateLinkrelativeRate": -100.00,
                "newUserNumLinkrelativeRate": null,
                "oldUserNumLinkrelativeRate": null,
                "orderUnitAmountLinkrelativeRate": -93.75,
                "pvYearbasisRate": null,
                "uvYearbasisRate": null,
                "payOrderNumYearbasisRate": null,
                "payOrderAmountYearbasisRate": null,
                "orderUvRateYearbasisRate": null,
                "newUserNumYearbasisRate": null,
                "oldUserNumYearbasisRate": null,
                "orderUnitAmountYearbasisRate": null
              },
              {
                "companyId": 276,
                "merchantId": null,
                "merchantName": null,
                "storeId": null,
                "storeName": null,
                "channelCode": "-1",
                "channelName": null,
                "dataDt": null,
                "dataStr": null,
                "orgFlag": null,
                "terminalSource": 99,
                "firstCategoryId": null,
                "firstCategoryName": null,
                "hasChild": false,
                "merchantFlag": null,
                "terminalName": "",
                "pv": 0,
                "uv": 0,
                "payOrderNum": 0,
                "newUserCount": 0,
                "oldUserCount": 0,
                "payOrderAmount": 0,
                "orderUvRate": 0,
                "orderUnitAmount": 0,
                "pvLinkrelativeRate": null,
                "uvLinkrelativeRate": null,
                "payOrderNumLinkrelativeRate": null,
                "payOrderAmountLinkrelativeRate": null,
                "orderUvRateLinkrelativeRate": null,
                "newUserNumLinkrelativeRate": null,
                "oldUserNumLinkrelativeRate": null,
                "orderUnitAmountLinkrelativeRate": null,
                "pvYearbasisRate": null,
                "uvYearbasisRate": null,
                "payOrderNumYearbasisRate": null,
                "payOrderAmountYearbasisRate": null,
                "orderUvRateYearbasisRate": null,
                "newUserNumYearbasisRate": null,
                "oldUserNumYearbasisRate": null,
                "orderUnitAmountYearbasisRate": null
              },
              {
                "companyId": 276,
                "merchantId": null,
                "merchantName": null,
                "storeId": null,
                "storeName": null,
                "channelCode": "110001",
                "channelName": "BBC",
                "dataDt": null,
                "dataStr": null,
                "orgFlag": null,
                "terminalSource": 99,
                "firstCategoryId": null,
                "firstCategoryName": null,
                "hasChild": false,
                "merchantFlag": null,
                "terminalName": "",
                "pv": 0,
                "uv": 0,
                "payOrderNum": 1,
                "newUserCount": 0,
                "oldUserCount": 0,
                "payOrderAmount": 0.01,
                "orderUvRate": 0,
                "orderUnitAmount": 0.01,
                "pvLinkrelativeRate": null,
                "uvLinkrelativeRate": null,
                "payOrderNumLinkrelativeRate": null,
                "payOrderAmountLinkrelativeRate": null,
                "orderUvRateLinkrelativeRate": null,
                "newUserNumLinkrelativeRate": null,
                "oldUserNumLinkrelativeRate": null,
                "orderUnitAmountLinkrelativeRate": null,
                "pvYearbasisRate": null,
                "uvYearbasisRate": null,
                "payOrderNumYearbasisRate": null,
                "payOrderAmountYearbasisRate": null,
                "orderUvRateYearbasisRate": null,
                "newUserNumYearbasisRate": null,
                "oldUserNumYearbasisRate": null,
                "orderUnitAmountYearbasisRate": null
              }]
          }
        },
        channelTerminalBarChartLegendData:['BBC', '天猫', '京东'],
        serialChannelTerminalBarChart:[],
        dataBBC: {
          name:'BBC',
          type:'bar',
          data:[320, 332, 301]
        },
        dataTM: {
          name:'天猫',
          type:'bar',
          data:[120, 132, 101]
        },
        dataJD:{
          name: '京东',
          type: 'bar',
          data: [220, 182, 191]
        },

        dataUVBBC: {
          name:'BBC',
          type:'bar',
          data:[320, 332, 301]
        },
        dataUVTM: {
          name:'天猫',
          type:'bar',
          data:[120, 132, 101]
        },
        dataUVJD:{
          name: '京东',
          type: 'bar',
          data: [220, 182, 191]
        }
      }
    },
    methods: {
      // 处理表格列过滤显示
      initColumns: function() {
        this.columns = [
          { prop: "channelName", label: "渠道", minWidth: 120 },
          { prop: "terminalName", label: "终端", minWidth: 50 },
          { prop: "uv", label: "UV", minWidth: 120 },
          { prop: "uvLinkrelativeRate", label: "环比", minWidth: 120 },
          { prop: "uvYearbasisRate", label: "年同比", minWidth: 120 },
          { prop: "pv", label: "PV", minWidth: 120 },
          { prop: "pvLinkrelativeRate", label: "环比", minWidth: 120 },
          { prop: "pvYearbasisRate", label: "年同比", minWidth: 120 },
          { prop: "payOrderNum", label: "成交订单数", minWidth: 120 },
          { prop: "orderUnitAmount", label: "成交订单金额", minWidth: 120 },
          { prop: "orderUvRate", label: "成交转化率", minWidth: 120 },
          { prop: "newUserCount", label: "新客数", minWidth: 120 },
          { prop: "oldUserCount", label: "老客数", minWidth: 120 }
        ];
        var temp = [];
        $.each(this.columns, function(key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },

      handleCheckAllChange(val) {
        let this_ =this;
        this_.checkedChannel = val ? channelOptions : [];
        this_.isIndeterminate = false;
        this_.serialChannelTerminalBarChart =[];
        if(val){
          this_.serialChannelTerminalBarChart.push(this_.dataBBC);
          this_.serialChannelTerminalBarChart.push(this_.dataTM);
          this_.serialChannelTerminalBarChart.push(this_.dataJD);
        }else {
          this_.serialChannelTerminalBarChart =[];
        }

        this.drawLine();
      },
      handleCheckedChannelChange(value) {
        let this_ =this;
        this_.serialChannelTerminalBarChart =[];
        let checkedCount = value.length;
        this_.checkAll = checkedCount === this_.channels.length;
        this_.isIndeterminate = checkedCount > 0 && checkedCount < this_.channels.length;
        this_.channelTerminalBarChartLegendData =value;
        console.log(checkedCount);
        for (let i = 0; i <checkedCount ;i++){
          console.log("'天猫'==value[i]");
          /**
           * 此处需要加上 统计让指标的判断，以便加载不同的数据。
           */
          if('BBC'==value[i]){
            this_.serialChannelTerminalBarChart.push(this_.dataBBC);
          }else if('天猫'==value[i]){
            this_.serialChannelTerminalBarChart.push(this_.dataTM);
          }else if('京东'==value[i]){
            this_.serialChannelTerminalBarChart.push(this_.dataJD);
          }
        }

        this_.drawLine();
      },

      option_indicator_change: function (val){
        console.log(val);
        let this_ =this;
        this_.serialChannelTerminalBarChart =[];
        if('uv'==val){
          this_.serialChannelTerminalBarChart.push(this_.dataBBC);
          this_.serialChannelTerminalBarChart.push(this_.dataTM);
          this_.serialChannelTerminalBarChart.push(this_.dataJD);
        }else if('pv'==val){
          this_.serialChannelTerminalBarChart.push(this_.dataUVBBC);
          this_.serialChannelTerminalBarChart.push(this_.dataUVTM);
          this_.serialChannelTerminalBarChart.push(this_.dataUVJD);
        }

        this_.drawLine();
      },

      //选择框
      selectionChange: function (params) {
        this.checked = params.selections
      },

      resetForm(formName) {
        (this.filters = {
          t: "payOrder",

        }),
          this.findPage();
      },
      // 获取分页数据
      findPage: function (data) {
        this.$refs.CyTable.findPageStaticState(this.filters);
      },

      // 换页刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        // this.init();
      },
      // 换页刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.pageRequest.pageNum = 1;
        // this.init();
      },
      mouseEnter: function () {
        let dvObj = document.getElementById("div1");

        console.log("--------------------");
        console.log(dvObj);

        dvObj.style.border = "background-color:#000000;";
      },

      drawLine: function (){
        let this_ =this;
        // 基于准备好的dom，初始化echarts实例
        let channelTerminalBarChart = this_.$echarts.init(document.getElementById('channelTerminalBarChart'))
        // 绘制图表
        channelTerminalBarChart.setOption({
          title: { },
          tooltip: {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['BBC','天猫','京东']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : ['iOS','Android','H5']
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : this_.serialChannelTerminalBarChart
        }, true);
      }
    },
    mounted() {
      this.initColumns();
      this.drawLine();
    }
  }
</script>

<style scoped>
  /*#chart1 {*/
  /*width: 300px;*/
  /*height: 300px;*/
  /*}*/
  .change {
    /*display:inline-block;*/
    /*text-align:left;*/
    /*background-color: #FFFFFF;*/
    /*margin: 10px;*/
  }

  .changs {
    /*display:inline-block;*/
    /*text-align:left;*/
    border: 1px solid #a6d9ff;
    /*background-color: #FFFFFF;*/
    /*margin: 10px;*/
  }



  .block-container {
    height: 1840px;

    /*width: 100%;*/
    background-color:#F0F3F4;
  }

  .block-title {
    text-align: center;
  }

  /* 父元素 */
  .block-content {
    font-size: 0;  /* 解决 inline-block 布局会出现多余间隙 */
    /*max-width: 1200px;*/
    margin: 0 auto;
  }

  .block-content .block-item-3,
  .block-content .block-item-4,
  .block-content .block-item-5,
  .block-content .block-item-6{
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    transition: all .4s ease;
    vertical-align: top; /* 设置顶部对齐 */
    font-size: 14px;
  }

  /* 3 列 */
  .block-content .block-item-3 {
    /*width: 45%;  !*  width: 32%;  *!*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 4 列 */
  .block-content .block-item-4 {
    /*width: 22%;   !* width: 23.5%; *!*/
    /*margin: 10px;  !*  margin-left: 2%;  *!*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 5 列 */
  .block-content .block-item-5 {
    /*width: 18%;*/
    /*margin: 10px;*/
    /*margin-left: 2.5%;*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 6 列 */
  .block-content .block-item-6 {
    /*margin: 10px;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 98%;
    margin-top: 20px;
    margin-left: 2%;
    margin-bottom: 30px;
    cursor: pointer;
  }

  /* 首列左边距设为0 */
  .block-content .block-item-3:first-child,
  .block-content .block-item-4:first-child,
  .block-content .block-item-5:first-child,
  .block-content .block-item-6:first-child {
    margin-left: 0;
  }

</style>
